<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>CodePen</title>
  <link rel="stylesheet" href="/stylesheets/css/main.css">
  <link rel="shortcut icon" href="/favicon.png">
</head>

<body data-theme="sublime" class="preload<% if logged_in %> logged-in<% end %>">

  <%= partial :header %>

  <div class="wrap">

    <div class="boxes">

      <div class="top-boxes group">

        <div id="box-html" class="box-html">

          <div class="powers">
            <h2 id="viewsource-html">HTML</h2>
            <a href="#" class="settings-nub" title="Open Settings">
              <span aria-hidden="true">⬇</span>
            </a>
            
            <a href="#" class="expander" title="Expand">
              <strong>⌥1</strong>
            </a>
          </div>

          <div class="code-wrap">
            <textarea id="html" class="code-box"></textarea>
          </div>

          <div class="settings">

            <form class="halfsies settings-row-1">
              <div>
                <input type="radio" class="hidden" id="html-none" checked name="html-preprocessor" value="none">
                <label class="button" for="html-none">None</label>
              </div>
              <div class="last">
                <input type="radio" class="hidden" id="jade" name="html-preprocessor" value="jade">
                <label class="button" for="jade">Jade <a target="_blank" href="http://jade-lang.com/">?</a></label>
              </div>
              <div>
                <input type="radio" class="hidden" id="slim" name="html-preprocessor" value="slim">
                <label class="button" for="slim">Slim <a target="_blank" href="http://slim-lang.com/">?</a></label>
              </div>
              <div class="last">
                <input type="radio" class="hidden" id="haml" name="html-preprocessor" value="haml">
                <label class="button" for="haml">HAML <a target="_blank" href="http://haml-lang.com/">?</a></label>
              </div>
            </form>

            <form class="settings-row-2">
              <label for="html-classes" class="small">Add Class(es) to &lt;html></label>
              <input type="text" id="html-classes" name="html-classes" class="fullwidth" placeholder="e.g. single post post-1234">
              <!-- Used for the color picker -->
              <input style="position: fixed; top: 500px; right: 500px;" id="tcolor" type="hidden"></input>
            </form>

          </div>

        </div><!-- END div.box-html -->

        <div class="box-css" id="box-css">

          <div class="powers">
            <h2 id="viewsource-css">CSS</h2>
            <a href="#" class="settings-nub" aria-hidden="true" data-icon="d">
              <span>⬇</span>
            </a>
            <a href="#" class="expander" title="Expand">
              <strong>⌥2</strong>
            </a>
          </div>

          <div class="code-wrap">
            <textarea id="css" class="code-box"></textarea>
          </div>

          <div class="settings">
            <form class="doublerow settings-row-1">
              <div>
                <input type="radio" class="hidden" id="css-none" checked name="css-preprocessor" value="none">
                <label class="button" for="css-none">None</label>
              </div>
              <div>
                <input type="radio" class="hidden" id="less" name="css-preprocessor" value="less">
                <label class="button" for="less">LESS <a target="_blank" href="http://lesscss.org/">?</a></label>
              </div>
              <div class="last">
                <input type="radio" class="hidden" id="stylus" name="css-preprocessor" value="stylus">
                <label class="button" for="stylus">Stylus <a target="_blank" href="http://learnboost.github.com/stylus/">?</a></label>
              </div>
              <div class="half">
                <input type="radio" class="hidden" id="scss" name="css-preprocessor" value="scss">
                <label class="button double-line" for="scss">
                  SCSS<br>
                  <small>with Compass</small>
                  <a target="_blank" href="http://sass-lang.com/">?</a></label>
              </div>
              <div class="half last">
                <input type="radio" class="hidden" id="sass" name="css-preprocessor" value="sass">
                <label class="button double-line" for="sass">
                  SASS<br>
                  <small>with Compass</small>
                <a target="_blank" href="http://sass-lang.com/">?</a></label>
              </div>

            </form>

            <form class="settings-row-2">
              <input type="radio" id="startercss-normalize" name="startercss" checked value="normalize">
              <label for="startercss-normalize" class="small-inline">Normalize</label> 
              <a class="inline-q" target="_blank" href="http://necolas.github.com/normalize.css/">?<a>

              &ensp;
            
              <input type="radio" id="startercss-reset" name="startercss" value="reset">
              <label for="startercss-reset" class="small-inline">Reset</label> 
              <a class="inline-q" target="_blank" href="http://meyerweb.com/eric/tools/css/reset/">?</a>

              &ensp;

              <input type="radio" id="startercss-neither" name="startercss" value="neither">
              <label for="startercss-neither" class="small-inline">Neither</label>
            </form>

            <form class="settings-row-3">
              <input type="checkbox" id="prefix-free" name="prefix-free">
              <label for="prefix-free" class="small-inline">Prefix free</label>
              <a class="inline-q" target="_blank" href="http://leaverou.github.com/prefixfree/">?</a>
            </form>

            <form class="settings-row-4">
              <label class="small" for="js-select">External CSS File</label>
              <input class="fullwidth" type="url" id="external-css" name="external-css" placeholder="http://yourwebsite.com/external.css">
            </form>

          </div>

        </div><!-- END div.box-css -->

        <div id="box-js" class="box-js last">

          <div class="powers">
            <h2 id="viewsource-js">JS</h2>
            <a href="#" class="settings-nub" aria-hidden="true" data-icon="d">
              <span>⬇</span>
            </a>
            <a href="#" class="expander" title="Expand">
              <strong>⌥3</strong>
            </a>
          </div>

          <div class="code-wrap">
            <textarea id="js" class="code-box"></textarea>
          </div>

          <div class="settings">

            <form class="settings-row-1">
              <div>
                <input type="radio" class="hidden" id="js-none" checked name="js-preprocessor" value="none">
                <label class="button" for="js-none">None</label>
              </div>
              <div class="double last">
                <input type="radio" class="hidden" id="coffeescript" name="js-preprocessor" value="coffeescript">
                <label class="button" for="coffeescript">CoffeeScript <a target="_blank" href="http://coffeescript.org/">?</a></label>
              </div>
            </form>

            <form class="settings-row-2">
              <label class="small" for="js-select">Latest Version of...</label>
              <select data-placeholder="JavaScript Library" id="js-select">
                <option value="">No Library</option>
                <option value="jquery">jQuery</option>
                <option value="mootools">MooTools</option>
                <option value="prototype">Prototype</option>
              </select>
            </form>

            <form class="settings-row-3">
              <label class="small" for="js-select">External JS File</label>
              <input class="fullwidth" type="url" id="external-js" name="external-js" placeholder="http://yourwebsite.com/external.js">
            </form>

            <form class="settings-row-4">
              <input type="checkbox" id="modernizr" name="modernizr">
              <label for="modernizr" class="small-inline">Modernizr</label>
            </form>

          </div>          

        </div><!-- END div.box-css -->

      </div><!-- END div.top-boxes -->

      <div class="result">

        <iframe src="<%= @iframe_src %>/secure_iframe" id="result"></iframe>

        <div id="drag-cover"></div>

      </div>

    </div><!--END div.boxes -->

  </div><!-- END div.wrap -->

  <%= partial :footer %>

  <div id="vert-resizer" class="vert-resizer"><span></span></div>

  <%= partial :keycommands %>

  <script>
    __c_data = <%= stringify(@c_data) %>;
  </script>

  <%= js_scripts([
      '/js/libs/jquery.js',
      '/js/libs/jquery-ui-1.8.18.custom.min.js',
      '/js/libs/codemirror.js',
      '/js/libs/chosen.jquery.min.js',
      '/js/libs/colorpicker.js',
      '/js/mode/javascript/javascript.js',
      '/js/mode/css/css.js',
      '/js/mode/xml/xml.js',
      '/js/util.js',
      '/js/tab_snippets.js',
      '/js/data.js',
      '/js/key_bindings.js',
      '/js/code_renderer.js',
      '/js/code_editor.js',
      '/js/share.js',
      '/js/main.js'
      ], 'index')
  %>

</body>

</html>